<template>
  <table class="table table-bordered" align="center">
    <thead>
      <tr align="center">
        <th v-for="(item, index) in title" :key="index">{{item}}</th>
      </tr>
    </thead>
    <tbody align="center">
      <x-tbody :columns="columns" :data="data"></x-tbody>
    </tbody>
  </table>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import XTbody from './XTbody.vue'

import { columnsProps } from '../CategoriesDefaults'

export default defineComponent({
  name: 'XTable',
  components: {
    XTbody
  },
  props: {
    columns: {
      type: Array as PropType<columnsProps[]>,
      required: true
    },
    data: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  setup (props: any) {
    const title = computed(() => {
      let arr = []
      if (props.columns) {
       arr = props.columns?.map((item: any) => item.title)
      }
      return arr
    })

    return { title }
  }
})
</script>
